<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
		<link rel="stylesheet" href="stylesheets/blueprint/screen.css" type="text/css" media="screen, projection">
		<link rel="stylesheet" href="stylesheets/blueprint/print.css" type="text/css" media="print">
		<!--[if lt IE 8]><link rel="stylesheet" href="stylesheets/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
		<link rel="stylesheet" type="text/css" href="stylesheets/cq.css">
		<!-- Check window size -->
		<script type="application/javascript">
			window.onload = function() {
				var winWidth = 0, winHeight = 0;
				if (typeof(window.innerWidth) == 'number') {
					//Non-IE
					winWidth = window.innerWidth;
					winHeight = window.innerHeight;
				} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
					//IE 6+ in 'standards compliant mode'
					winWidth = document.documentElement.clientWidth;
					winHeight = document.documentElement.clientHeight;
				} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
					//IE 4 compatible
					winWidth = document.body.clientWidth;
					winHeight = document.body.clientHeight;
				}
				if (winHeight < 600 || winWidth < 950) {
					window.alert("A minimum window size of 950x600 is required.\nPlease resize or press F11 for full-screen mode.");
				}
			};
		</script>
		<title>CQ</title>
	</head>
	<body>
		<div class="container">
			<div class="span-20 prepend-2">
				<h1 class="centered" id="title">[Title]</h1>
			</div>
			<div class="span-1">
				Music: 
			</div>
			<div class="span-1 last">
				<ul>
					<li>
						<a id="play" href="#">off</a>
					</li>
					<li>
						<a id="pause" href="#">on</a>
					</li>
				</ul>
			</div>
		</div>
		<!-- Music player -->
		<div id="jplayer">
		</div>
		<!-- Graphics -->
		<div class="hidden">
			<img id="items" src="rsrc/items.png"/>
			<img id="monsters" src="rsrc/monsters.png"/>
			<img id="player" src="rsrc/player.png"/>
			<img id="tiles" src="rsrc/tiles.png"/>
		</div>
		<div class="container screen" id="loading_screen">
				<div class="span-24 centered">
					<h2>Loading...</h2>
				</div>
				<div class="span-24 centered">
					Please wait.
				</div>
		</div>
		<!-- Character creation-->
		<div class="container screen hidden" id="character_creation_screen">
			<div class="span-24 centered" id="your_name">
				<div class="span-24 centered">
					<h2>What is your name?</h2>
				</div>
				<div class="span-24 centered">
					<h3 id="enter_name"></h3>
				</div>
			</div>
			<div class="span-24 centered" id="your_quest">
				<div class="span-24 centered">
					<h2>What is your quest?</h2>
				</div>
				<div class="span-24 centered">
					<h3 id="enter_quest"></h3>
				</div>
			</div>
			<div class="span-24 centered" id="your color">
				<h2>What is your favorite color?</h2>
				<h3 id="enter_color"></h3>
			</div>
		</div>
		<!-- Game -->
		<div class="container screen hidden" id="game_screen">
			<div class="span-24" id="actions">
				<h3>[actions]</h3>
			</div>
			<div class="span-4" id="character_sheet">
				<div class="span-4 last centered" id="name">
					<h3>[name]</h3>
				</div>
				<div class="span-4 last centered" id="level_and_class">
					<h3>[level_and_class]</h3>
				</div>
				<div class="span-2">
					Damage
				</div>
				<div class="span-2 last centered" id="damage">
					[dmg]
				</div>
				<div class="span-2">
					Attack
				</div>
				<div class="span-2 last centered" id="attack">
					[atk]
				</div>
				<div class="span-2">
					Defense
				</div>
				<div class="span-2 last centered" id="defense">
					[def]
				</div>
				<div class="span-2">
					Vitality
				</div>
				<div class="span-2 last centered" id="vitality">
					[vit]
				</div>
				<div class="span-2">
					Speed
				</div>
				<div class="span-2 last centered" id="speed">
					[spd]
				</div>
				<div class="span-2">
					Spirit
				</div>
				<div class="span-2 last centered" id="spirit">
					[spr]
				</div>
				<div class="span-4 last">
					&nbsp;
				</div>
				<div class="span-2">
					Life
				</div>
				<div class="span-2 last centered" id="life">
					[lif]
				</div>
				<div class="span-2">
					Charge
				</div>
				<div class="span-2 last centered" id="charge">
					[crg]
				</div>
				<div class="span-2">
					Experience
				</div>
				<div class="span-2 last centered" id="experience">
					[exp]
				</div>
			</div>
			<div class="span-16">
				<div class="span-16 last centered" id="dungeon_level">
					<h3>[dungeon_level]</h3>
				</div>
				<div class="span-16 last centered" id="viewer">
					<canvas width= "630" height= "400">
						Your browser does not support the canvas tag.
						<br>
						Please install the latest version of either <a href='http://www.mozilla.com/firefox/'>Firefox</a>, <a href='http://www.google.com/chrome'>Chrome</a>, <a href='http://www.apple.com/safari/'>Safari</a>
						or <a href='http://www.opera.com/'>Opera</a>.
					</canvas>
				</div>
				<div class="span-2">
					&nbsp;
				</div>
				<div class="span-4 centered" id="life_bar">
					[life_bar]
				</div>
				<div class="span-4 centered" id="charge_bar">
					[charge_bar]
				</div>
				<div class="span-4 last centered" id="experience_bar">
					[experience_bar]
				</div>
				<div class="span-2">
					&nbsp;
				</div>
			</div>
			<div class="span-4 last">
				<div class="span-4 last centered">
					<h3>Pack</h3>
				</div>
				<div class="span-4 last item" id="item00">
					<img class="span-1 hidden"/>
					<div class="span-3 last">
					</div>
				</div>
				<div class="span-4 last item" id="item01">
					<img class="span-1 hidden"/>
					<div class="span-3 last">
					</div>
				</div>
				<div class="span-4 last item" id="item02">
					<img class="span-1 hidden"/>
					<div class="span-3 last">
					</div>
				</div>
				<div class="span-4 last item" id="item03">
					<img class="span-1 hidden"/>
					<div class="span-3 last">
					</div>
				</div>
				<div class="span-4 last item" id="item04">
					<img class="span-1 hidden"/>
					<div class="span-3 last">
					</div>
				</div>
				<div class="span-4 last item" id="item05">
					<img class="span-1 hidden"/>
					<div class="span-3 last">
					</div>
				</div>
				<div class="span-4 last item" id="item06">
					<img class="span-1 hidden"/>
					<div class="span-3 last">
					</div>
				</div>
				<div class="span-4 last item" id="item07">
					<img class="span-1 hidden"/>
					<div class="span-3 last">
					</div>
				</div>
				<div class="span-4 last item" id="item08">
					<img class="span-1 hidden"/>
					<div class="span-3 last">
					</div>
				</div>
				<div class="span-4 last item" id="item09">
					<img class="span-1 hidden"/>
					<div class="span-3 last">
					</div>
				</div>
				<div class="span-4 last item" id="item10">
					<img class="span-1 hidden"/>
					<div class="span-3 last">
					</div>
				</div>
				<div class="span-4 last item" id="item11">
					<img class="span-1 hidden"/>
					<div class="span-3 last">
					</div>
				</div>
			</div>
			<div class="span-24 centered">
				<div class="span-24 last hidden" id="message0">
				</div>
				<div class="span-24 last hidden" id="message1">
				</div>
				<div class="span-24 last hidden" id="message2">
				</div>
			</div>
		</div>
		<!-- Libs -->
		<script type="application/javascript" src="http://www.google.com/jsapi">
		</script>
		<script type="application/javascript">
			google.load("jquery", "1.4.1");
		</script>
		<script type="application/javascript" src="src/jquery.jplayer.js">
		</script>
		<!-- Start the music and define data-loading & game-starting -->
		<script type="application/javascript">
			// Play music
			$("#jplayer").jPlayer({
				ready: function() {
					$(this).setFile("rsrc/Forest%20of%20Sorrow.mp3", "rsrc/Forest%20of%20Sorrow.ogg").play();
				},
				oggSupport: true,
				swfPath: "rsrc"
			}).jPlayerId("play", "play").jPlayerId("pause", "pause").onProgressChange(function(lp, ppr, ppa, pt, tt) {
			}).onSoundComplete(function() {
				$(this).play();
			});
			
			// Load data files
			var CQ = {};
			CQ.data = {};
			CQ.filesRemaining = 5;
			CQ.loadData = function(name, value) {
				CQ.data[name] = value;
				CQ.filesRemaining--;
				if (CQ.filesRemaining === 0) {
					// Start the game
					Main(CQ.data);
				}
			}
		</script>
		<!-- Game code -->
		<script type="application/javascript" src="src/viewer.js">
		</script>
		<script type="application/javascript" src="src/viewer.js">
		</script>
		<script type="application/javascript" src="src/status_bars.js">
		</script>
		<script type="application/javascript" src="src/message_log.js">
		</script>
		<script type="application/javascript" src="src/main.js">
		</script>
		<!-- Load data and start the game once done -->
		<script type="application/javascript">
			$.getJSON("rsrc/creatures.json", function(file) {
				CQ.loadData("creatures", file);
			});
			$.getJSON("rsrc/descriptions.json", function(file) {
				CQ.loadData("descriptions", file);
			});
			$.getJSON("rsrc/items.json", function(file) {
				CQ.loadData("items", file);
			});
			$.getJSON("keycodes.json", function(file) {
				CQ.loadData("keycodes", file);
			});
			$.getJSON("settings.json", function(file) {
				CQ.loadData("settings", file);
			});
		</script>
	</body>
</html>
